<template>
  <div class="app-container">
    <el-row>
      <!-- 树 -->
      <el-col :span="4" class="tl-left-tree">
        <el-scrollbar ref="treeScroll" :style="{ height: treeHeight + 'px' }" resizable-key="treeHeight" :resizable-reduce="20" :resizable-refs="['treeSearch']">
					<el-button type="text" size="mini" style="width: 28%" @click="toProvince()">展开到省</el-button>
          <el-button type="text" size="mini" style="width: 28%" @click="toCity()">展开到市</el-button>
          <el-button type="text" size="mini" style="width: 28%" @click="toMatch()">展开到县</el-button>
          <el-tree class="tl-tree" v-if="refreshTree" ref="tree" :data="treeData" node-key="id" :default-expand-all="false" highlight-current :expand-on-click-node="false" :default-expanded-keys="expandArray" @node-click="doTreeQuery" :filter-node-method="filterTreeNode"></el-tree>
        </el-scrollbar>
      </el-col>
      <el-col :span="20">
        <el-card>
          <el-row>
            <tl-list-toolbar ref="toolbar" @add="openAddDialog('editForm')" @exportExcel="doExportExcel" @deleteBatch="doDeleteBatch" :isDisplayAdd="false" @refresh="doRefresh" @columnCustomize="doColumnCustomize" @displaySearch="doDisplaySearch" :disableDeleteBatch="selectedRowKeys.length <= 0" :isDisplayDeleteBatch="false" :isDisplayExport="false" :isDisplayRight="false">
              <template slot="left-btn">
                <el-button class="filter-item" type="primary" @click="clearData">清空</el-button>
                <el-button class="filter-item" type="primary" @click="saveData" v-loading="saveLoading">保存</el-button>
              </template>
            </tl-list-toolbar>
          </el-row>
          <el-row>
            <el-table
              ref="mainTable"
              class="tl-table" :height="tableHeight" resizable-key="tableHeight" :resizable-reduce="42" :resizable-refs="tableResizeRefs"
              :data="tableData"
              row-key="code"
              border
              default-expand-all
              style="width: 100%;"
              :tree-props="{children: 'children'}">
              <el-table-column
                prop="name"
                label="产品类别信息"
                show-overflow-tooltip
                fixed
                width="170">
              </el-table-column>
              <el-table-column
                align="center"
                :prop="'position_' + item.marketingpost"
                :label="item.dispmarketingpost"
                min-width="100" v-for="item in marketingInfos" :key="item.id">
                <template slot-scope="scope">
                  <el-checkbox v-if="scope.row['position_' + item.marketingpost]" v-model="scope.row['position_' + item.marketingpost]" :true-label="'1'" :false-label="'0'"></el-checkbox>
                  <el-checkbox v-if="scope.row['productcheck_' + item.marketingpost]" v-model="scope.row['productcheck_' + item.marketingpost]" @change="checked=>productLineChange(checked,scope.row,item.marketingpost)" :true-label="'1'" :false-label="'0'"></el-checkbox>
                </template>
              </el-table-column>
            </el-table>
          </el-row>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
    /** mixins */
    import { mixin_tree_list } from "@tapui/mixins/mixin_tree_list"
    /** 工具类**/
    import { getAction, putAction, postAction, deleteAction } from "@tapui/utils/http"
    export default {
        name: "mmsProvinceMarketingInfo",
        mixins: [mixin_tree_list],
        data() {
            return {
                urlPrefix: "/mms/provinceMarketingInfo/",
                url: {
                    queryCodeList: "/mms/provinceMarketingInfo/dataCodeList",
                    list: "/mms/provinceMarketingInfo/list", // 列表url
                    queryTree: "/mms/provinceCityMatchinfo/queryTreeList", // 根据权限获取树节点
                    getMarketingInfo: "/mms/marketingProductlineInfo/getMarketingInfo", // 获取表格数据
                    saveMarketingInfo: "/mms/marketingProductlineInfo/saveMarketingInfo" // 存储表格数据
                },
                codeModel: {},
                // 排序参数
                sorterInfo: {
                    sidx: "sortcode",
                    sord: "desc"
                },
                // 数列表关联字段
                treeQueryKey: "qry_deptcommoncode1",
                tableData: [],
                marketingInfos: [],
                checkData: [],
                saveLoading: false,
								refreshTree: true,
								expandArray: [],
                curDeptCommonCode: ""
            }
        },
        methods: {
						// 展示到省级
						toProvince() {
							this.expandArray = []
							// 直接用一级部门级数据
							if (this.treeData[0].children === null) {
								return
							}
							this.treeData[0].children.forEach((topitem) => {
								this.expandArray.push(topitem.id)
							})
							this.$nextTick(() => {
								this.refreshTree = true
							})
							this.refreshTree = false
						},
						// 展示到市级
						toCity() {
							this.expandArray = []
							// 直接用一级部门级数据
							if (this.treeData[0].children === null) {
								return
							}
							this.treeData[0].children.forEach((topitem) => {
								if (topitem.children.length > 0) {
									// 遍历一级部门下省级数据
									topitem.children.forEach((provinceitem) => {
										// if (provinceitem.treeFullData.arealevel === '0') {
											this.expandArray.push(provinceitem.id)
										// }
									})
								}
							})
							this.$nextTick(() => {
								this.refreshTree = true
							})
							this.refreshTree = false
						},
						// 展示到县级
						toMatch() {
							this.expandArray = []
							// 直接用一级部门级数据
							if (this.treeData[0].children === null) {
									return
								}
							this.treeData[0].children.forEach((topitem) => {
								if (topitem.children.length > 0) {
									// 遍历一级部门下省级数据
									topitem.children.forEach((provinceitem) => {
										if (provinceitem.children !== null) {
										if (provinceitem.children.length > 0) {
											// 遍历省级下市级数据
											provinceitem.children.forEach((cityitem) => {
												// if (cityitem.treeFullData.arealevel === '1') {
													this.expandArray.push(cityitem.id)
												// }
											})
										}
										} else {
                        this.expandArray.push(provinceitem.id)
										}
									})
								}
							})
							this.$nextTick(() => {
								this.refreshTree = true
							})
							this.refreshTree = false
						},
            // 将当前Node的id替换为code,否则doListQuery()只会根据id即省区的cbodept里的id进行查询
            getMarketingInfo() {
                let param = {}
                if (this.curDeptCommonCode) {
                    param.qry_deptcommoncode1 = this.curDeptCommonCode
                }
                getAction(this.url.getMarketingInfo, param).then((res) => {
                    if (res.success) {
                      this.marketingInfos = res.result.marketingInfos
                      this.tableData = res.result.tabledata
                      this.tableData.forEach((titem, index) => {
                          this.marketingInfos.forEach((mitem, index) => {
                              titem["productcheck_" + mitem.marketingpost] = this.productChecked(titem, mitem.marketingpost)
                          })
                      })
                      this.checkData = res.result.checkdata
                      this.closeLoading()
                    } else {
                        this.$tap.alert(res.message)
                    }
                }).catch((err) => {
                    this.closeLoading()
                    this.$tap.alert(err.message)
                })
								this.toProvince()
            },
            cataChange(itemData) {
                console.log(this.tableData)
            },
            productLineChange(checked, itemData, marketingcode) {
                if (itemData.children.length <= 0) {
                    itemData['productcheck_' + marketingcode] = "0"
                    this.$tap.message("该产品线无分类无法选择", "warning")
                    return false
                }
                for (var i = 0; i < itemData.children.length; i++) {
                    itemData.children[i]['position_' + marketingcode] = checked
                }
            },
            productChecked(itemData, marketingcode) {
                var isAllCheck = "1"
                for (var i = 0; i < itemData.children.length; i++) {
                    if (itemData.children[i]['position_' + marketingcode] === "0") {
                        isAllCheck = "0"
                    }
                }
                if (itemData.children.length > 0) {
                    return isAllCheck
                } else {
                    return "0"
                }
            },
            saveData() {
                this.saveLoading = true
                let param = {
                    "tabledata": this.tableData
                }
                if (this.curDeptCommonCode) {
                    param.qry_deptcommoncode1 = this.curDeptCommonCode
                }
                postAction(this.url.saveMarketingInfo, param).then((res) => {
                    if (res.success) {
                        this.$tap.message(res.message)
                    } else {
                        this.$tap.alert(res.message)
                    }
                    this.saveLoading = false
                }).catch((err) => {
                    this.saveLoading = false
                    this.$tap.alert(err.message)
                })
            },
            clearData() {
                this.tableData.forEach((titem, index) => {
                    for (var linekey in titem) {
                        if (linekey.indexOf("productcheck_") !== -1) {
                            titem[linekey] = "0"
                        }
                    }
                    titem.children.forEach((citem, index) => {
                        for (var childkey in citem) {
                            if (childkey.indexOf("position_") !== -1) {
                                citem[childkey] = "0"
                            }
                        }
                    })
                })
            },
            doTreeQuery(treeNode) {
                if (treeNode.pid !== "-1") {
                    this.openLoading()
                    this.curDeptCommonCode = treeNode.code
                    this.getMarketingInfo()
                } else {
                    let rootTree = this.$refs.tree.getCurrentNode()
                    if (rootTree.children && rootTree.children.length > 0) {
                        this.$refs.tree.setCurrentNode(rootTree.children[0])
                        this.curDeptCommonCode = rootTree.children[0].code
                        this.getMarketingInfo()
                    } else {
                        this.closeLoading()
                    }
                }
                let rootTree = this.$refs.tree.getCurrentNode()
                console.log(rootTree)
            }
        }
    }
</script>
<style lang="scss" scoped>
  .tl-left-tree /deep/ .el-scrollbar__wrap {
    overflow-x: hidden
  }
</style>
